<template>
  <view class="video-wrap">
    <!-- <h3 class="title">请输入标题</h3> -->
	<div class="video-wrap-head">
		<u-upload
		  ref="uUpload"
		   max-count="1"
		  :show-tips="false"
		  :action="upLoadAction"
		  :form-data="formData"
		  @on-remove="onRemove"
		  width="110"
		  height="110"
		  upload-text="上传封面"
		></u-upload>
		<u-input v-model="value"  placeholder-style="color:#eee" class="input-title" placeholder="请输入短视频标题"></u-input>
	</div>
   <div class="upload-wrap-block" @click="uploadVideo">
	   <div class="upload-wrap"  :style="{backgroundColor:percent===100?'#000':null}">
	   	<u-icon :name='percent===100?"play-circle-fill":"camera-fill"' size="90" color='#999'></u-icon>
	   	<p  class="upload-wrap-txt"> {{percent===100?'点击预览':'上传视频'}}</p>
	   	<u-line-progress v-if="percent>0" class="u-m-t-10"  active-color="#FD2A53" height="20" striped striped-active inactive-color="#333" :percent="percent"></u-line-progress>
	   </div>
   </div>

		<u-popup v-model="previewShow" mode="center">
				<view>      
				<video id="myVideo" :src="videoPath"
                    @error="videoErrorCallback"  enable-danmu autoplay controls></video>
				</view>
			</u-popup>
    <u-button type="error" class="post-btn" shape="circle" @click="post">{{ $t("发布") }}</u-button>
	<u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { SERVERTAPI } from "../../config/index";
export default {
  data() {
    return {
      value: "",
	  videoPath:'',
	  previewShow:false,
	  formData:{},
	   upLoadAction: '',
	   percent:0
    };
  },
  onLoad(){
	this.upLoadAction=this.$baseUrl + "api/Common/uploadPic",
	this.formData = this.$http.returnCommonParams(
	  "api/Common/uploadPic",
	  "short-video"
	);  
  },
  methods: {
   bindTextAreaBlur: function (e) {
		  console.log(e.detail.value)
		  this.value = e.detail.value
	  },
    post() {
		const {value:title,videoPath} = this
		if(!title){
			return this.$toast('请输入短视频标题')
		}
		const  coverRes = this.$refs.uUpload.lists.filter(val => {
							return val.progress == 100;
						})
		const {response = {}} =  coverRes[0] || {}
		if(!coverRes.length || response && response.data && !response.data.path){
			return this.$toast('请上传短视频封面')
		}
		if(!videoPath){
			return this.$toast('请上传短视频')
		}
		const params = {
			goods_id:114,
			title,
			cover_img:response.data.path,
			video_path:videoPath,
			describe:title
		}
      this.$http.addVideo(params).then(res=>{
		 if(res.status===200){
			this.$refs.uToast.show({
				title: res.mess,
				type: 'success',
				back: true
			})
		 }
		 
	  });
    },
	previewVideo(){
		this.previewShow= true
	},
	uploadVideo(){
		if(this.percent===100){
			return this.previewVideo()
		}
		uni.chooseVideo({
			success: res=> {
				this.percent = 10
				this.$http.uploadVideo(res.tempFilePath,'short_video').then(result=>{
					const {status,mess,data} = result.data && JSON.parse(result.data)
					if(status===200){
						this.videoPath = data && data.path
						this.percent = 100
					}
					this.$toast(mess)
				})
				
			}
		});
	}
  },
};
</script>

<style lang="scss" scoped>
.video-wrap {
  background-color: #000;
  padding:140rpx 20px 20px;
  height: 100%;
  &-head{
	  display: flex;
	  background-color: rgba(255, 255, 255, 0.6);
	  border-radius: 6px;
	  position: relative;
	  z-index: 100;
  }
}
.title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin: 20px 0 10px;
}
.v-textarea {
  background-color: #f5f5f5;
  font-size: 28rpx;
  padding: 10px 8px;
  width: 100%;
  height: 80rpx;
  border-radius: 8px;
}
.post-btn {
  margin-top: 20px;
  position: fixed;
  bottom:50rpx;
  width:670rpx;
  height: 90rpx;
  background-color: #FD2A53;
  z-index: 200;
}
.upload-wrap{
	width:200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 4rpx;
	&-txt{
		font-size:28rpx;
		color:#999;
		margin-top:10rpx;
	}
}
.upload-wrap-block{
	position: fixed;
	left:0;
	right:0;
	bottom:0;
	top:0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 0;
	
}
/deep/ .u-add-tips{
	font-size:20rpx
}
/deep/ .u-add-wrap{
	background-color: #333;
}
/deep/ .uni-input-input{
	color:#fff
}
.input-title{
	margin:26rpx 6px 0;
	color:#fff
}
</style>